<template>
  <div class="content">
    <div class="conmment">
      <div class="header">
        <el-input
          v-model="searchName"
          maxlength="20"
          placeholder="请输入筛选值"
          @input="inputValue"
        ></el-input>
      </div>
      <div class="tree">
        <el-tree
          :data="labels"
          node-key="id"
          default-expand-all
          :expand-on-click-node="false"
          :props="{ label: 'label_name' }"
          @node-click="treeNodeClick"
          :filter-node-method="filterNode"
          ref="popTree"
        ></el-tree>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    labels: {
      type: Array,
      default: () => [],
    },
    TreeType: {
      type: String,
      default: "",
    },
  },
  data() {
    return {
      searchName: "",
    };
  },
  methods: {
    treeNodeClick(data) {
      this.$emit("nodeClick", data, this.TreeType);
    },
    //输入筛选
    inputValue(val) {
      this.$refs.popTree.filter(val);
    },
    filterNode(value, data) {
      if (!value) return true;
      return data.label_name.indexOf(value) !== -1;
    },
  },
};
</script>

<style lang="scss" scoped>
.content {
  width: 100%;
  height: 300px;

  .conmment {
    width: 100%;
    height: 100%;

    .header {
      width: 100%;
      height: 15%;
    }

    .tree {
      width: 100%;
      height: 85%;
      overflow: auto;
    }
  }
}
</style>
